{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>湘行 - 湘西旅游出行服务平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入民族风格字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1A3A59', // 调整为主色调：蜡染蓝
                        secondary: '#9E2A2B', // 辅助色：苗族红
                        wood: '#8B4513', // 木质棕
                        river: '#2F4F4F', // 沱江青
                        beige: '#F5F1E9', // 米白色底
                        woodLight: '#D2B48C', // 浅木色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        miao: ['"Ma Shan Zheng"', 'cursive'],
                    },
                    boxShadow: {
                        'card': '0 4px 12px rgba(139, 69, 19, 0.08)',
                        'hover': '0 8px 24px rgba(139, 69, 19, 0.15)',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .wood-texture {
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%238b4513' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
            }
        }
    </style>
    <style>
    :root {
        --primary-brown: #8B4513; /* 木质建筑棕 */
        --primary-green: #2F4F4F; /* 沱江青绿色 */
        --accent-red: #9E2A2B; /* 苗族红 */
        --primary-beige: #F5F1E9; /* 米白色底 */
    }
    body {
        font-family: 'Inter', system-ui, sans-serif;
        background-color: var(--primary-beige);
    }
    .container{
        width: 1128px;
        margin: 0 auto;
    }
    .sub-header {
        background-color: white;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        position: sticky;
        top: 0;
        z-index: 50;
    }
    .sub-header .logo{
        width: 234px;
        height: 70px;
        float: left;
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .sub-header .logo a{
        color: var(--primary-brown);
        text-decoration: none;
        display: flex; /* 添加flex布局 */
        align-items: center; /* 垂直居中对齐 */
    }
    .sub-header .menu-list{
        float: left;
        height: 70px;
        line-height: 70px;
    }
    .sub-header .menu-list a{
        display: inline-block;
        padding: 0 10px;
        color: var(--primary-brown);
        font-size: 16px;
        text-decoration: none;
        position: relative;
        font-weight: 500;
    }
    .sub-header .menu-list a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 10px;
        width: 0;
        height: 2px;
        background-color: var(--accent-red);
        transition: width 0.3s;
    }
    .sub-header .menu-list a:hover{
        color: var(--accent-red);
    }
    .sub-header .menu-list a:hover::after {
        width: calc(100% - 20px);
    }
    .sub-header .logon{
        float: right;
        height: 70px;
        line-height: 70px;
    }
    .sub-header .logon a{
        display: inline-block;
        padding: 0 10px;
        color: var(--primary-brown);
        font-size: 16px;
        text-decoration: none;
    }
    .sub-header .logon a:hover{
        color: var(--accent-red);
    }
    .sub-header .name{
        color: var(--primary-brown);
        font-size: 24px;
        font-family: "Ma Shan Zheng", cursive;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        display: inline-block; /* 确保文字是块级元素，与图标并排 */
        vertical-align: middle; /* 垂直居中 */
    }
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }

    /* 移动端菜单按钮 */
    .mobile-menu-button {
        display: none;
        float: right;
        margin: 15px 10px;
        background: none;
        border: none;
        font-size: 24px;
        color: var(--primary-brown);
        cursor: pointer;
    }

    @media (max-width: 768px) {
        .mobile-menu-button {
            display: block;
        }
    }

    /* 苗族图案装饰分隔线 */
    .miao-divider {
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20' viewBox='0 0 100 20'%3E%3Cpath d='M21.184 20c.357-.13.72-.264.888-.14 1.24.916 1.9 2.342 3.028 2.982.9.5 1.972-.222 2.656-1.162.684-.94 1.012-2.067 1.804-2.946.792-.88 1.952-1.394 3.04-1.394 1.088 0 2.248.514 3.04 1.394.792.88 1.12 1.996 1.804 2.946.684.94 1.756 1.662 2.656 1.162 1.128-.64 1.787-2.066 3.028-2.982.168-.125.53-.001.888.14 1.39.509 2.89.84 4.416.84 1.527 0 3.027-.331 4.416-.84.358-.13.72-.264.888.14 1.24.916 1.9 2.342 3.028 2.982.9.5 1.972-.222 2.656-1.162.684-.94 1.012-2.067 1.804-2.946.792-.88 1.952-1.394 3.04-1.394 1.088 0 2.248.514 3.04 1.394.792.88 1.12 1.996 1.804 2.946.684.94 1.756 1.662 2.656 1.162 1.128-.64 1.787-2.066 3.028-2.982.168-.125.53-.001.888.14V0H0v20c.358-.13.72-.264.888.14 1.24.916 1.9 2.342 3.028 2.982.9.5 1.972-.222 2.656-1.162.684-.94 1.012-2.067 1.804-2.946.792-.88 1.952-1.394 3.04-1.394 1.088 0 2.248.514 3.04 1.394.792.88 1.12 1.996 1.804 2.946.684.94 1.756 1.662 2.656 1.162 1.128-.64 1.787-2.066 3.028-2.982.168-.125.53-.001.888.14 1.39.509 2.89.84 4.416.84 1.527 0 3.027-.331 4.416-.84z' fill='%239E2A2B' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
        background-repeat: repeat-x;
        margin: 2rem 0;
    }

    /* 卡片样式增强 */
    .accommodation-card {
        transition: all 0.3s ease;
    }
    .accommodation-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(139, 69, 19, 0.1), 0 10px 10px -5px rgba(139, 69, 19, 0.04);
    }
    .accommodation-card:hover .card-image {
        transform: scale(1.05);
    }
    .card-image-container {
        overflow: hidden;
    }
    .card-image {
        transition: transform 0.5s ease;
    }

    /* 特色标签样式 */
    .feature-tag {
        position: relative;
        overflow: hidden;
    }
    .feature-tag::after {
        content: "";
        position: absolute;
        top: 0;
        right: -15px;
        width: 30px;
        height: 30px;
        background-color: inherit;
        transform: rotate(45deg);
    }

    /* 按钮样式融入民族元素 */
    .btn-miao {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    .btn-miao::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
        z-index: -1;
        opacity: 0.3;
    }

    /* 木质边框效果 */
    .wood-border {
        border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='100' viewBox='0 0 75 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%238b4513' fill-opacity='0.4'%3E%3Cpath d='M24 9v13h-4v-13h4zm15 0v13h-4v-13h4zm15 0v13h-4v-13h4zm-30 30v13h-4v-13h4zm15 0v13h-4v-13h4zm15 0v13h-4v-13h4zm-30 30v13h-4v-13h4zm15 0v13h-4v-13h4zm15 0v13h-4v-13h4z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 25% repeat;
        border-width: 4px;
        border-style: solid;
    }

    /* 用户菜单样式 */
    .user-menu-container {
        position: relative;
        display: inline-block;
        margin-left: 10px;
    }
    .user-menu-trigger {
        display: flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        padding: 0 10px;
        color: var(--primary);
        text-decoration: none;
    }
    .user-avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #ddd;
        display: inline-block;
        vertical-align: middle;
        background-size: cover;
        background-position: center;
    }
    .user-dropdown-menu {
        position: absolute;
        top: 100%;
        min-width: 180px;
        right: 0;
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        padding: 2px 0;
        margin: 5px 0 0;
        list-style: none;
        z-index: 1000;
        display: none;
        border: 1px solid #D2B48C;
    }
    .user-dropdown-menu.active {
        display: block;
    }
    .user-dropdown-menu li {
        margin: 0;
        padding: 0;
    }
    .user-dropdown-menu a {
        display: block;
        padding: 3px 12px;
        color: #333;
        text-decoration: none;
        white-space: nowrap;
        font-size: 14px;
    }
    .user-dropdown-menu a:hover {
        background-color: #F0E6D2;
        color: var(--secondary);
    }
    .user-dropdown-menu .divider {
        height: 1px;
        margin: 2px 0;
        background-color: #eee;
    }
    .user-dropdown-menu .logout {
        color: #dc3545;
        padding: 2px 12px;
        font-size: 13px;
    }
    .user-dropdown-menu .logout:hover {
        background-color: #f8d7da;
        color: #721c24;
    }

    /* 城市建议下拉框样式 */
    .city-suggestions {
        position: absolute;
        z-index: 10;
        left: 0;
        right: 0;
        margin-top: 4px;
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        max-height: 200px;
        overflow-y: auto;
    }
    </style>
</head>

<body class="bg-beige wood-texture font-sans text-wood">
    <!-- 顶部导航栏 -->
<header class="sub-header clearfix">
    <div class="container">
        <!-- 移动端菜单按钮 -->
        <button class="mobile-menu-button" id="mobile-menu-button">
            <i class="fa fa-bars"></i>
        </button>

        <div class="logo">
            <a href="/search/">
                <!-- 吊脚楼图标 -->
                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
                    <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
                </svg>
                <span class="name">湘行</span>
            </a>
        </div>
        <div class="menu-list">
            <a href="/search/">首页</a>
            <a href="/user/strategy/">攻略笔记</a>

            <a href="/travel/group/">旅游团</a>
            <a href="{% url 'house' %}">酒店/民宿</a>
            <a href="#" class="active">出行</a>
            <a href="{% url 'itinerary' %}">我的行程</a>
        </div>
        <div class="logon">
            <!-- 使用Django模板条件判断用户登录状态 -->
            {% if user.is_authenticated %}
                <!-- 用户已登录时显示用户菜单 -->
                <a href="/user/message/reminder/" class="relative">
                    <i class="fa fa-bell-o"></i>
                </a>
                <div class="user-menu-container">
                    <a class="user-menu-trigger">
                        <span class="user-avatar" style="background-image: url('{% static 'img/4.jpg' %}');"></span>
                        <span>{{ user.username }}</span>
                    </a>
                    <ul class="user-dropdown-menu">
                        <li><a href="/user/profile/">个人中心</a></li>
                        <li><a href="/user/collections/">我的收藏</a></li>
                        <li><a href="/itinerary/">我的行程</a></li>
                        <li><a href="/user/settings/">设置</a></li>
                        <li class="divider"></li>
                        <li><a href="/user/logout/" class="logout">退出登录</a></li>
                    </ul>
                </div>
            {% else %}
                <!-- 用户未登录时显示登录注册按钮 -->
                <a href="/user/login/">登录</a>
                <a href="/register/">注册</a>
                <a href="#" class="relative">
                    <i class="fa fa-bell-o"></i>
                </a>
            {% endif %}
        </div>
    </div>
</header>

    <!-- 移动端菜单 -->
    <div class="md:hidden hidden bg-white border-t" id="mobile-menu">
        <div class="container mx-auto px-4 py-3 space-y-3">
            <a href="/search/" class="block py-2 text-neutral-500 hover:text-primary">首页</a>
            <a href="/user/logout/" class="block py-2 text-neutral-500 hover:text-primary">攻略笔记</a>

            <a href="/travel/group/"  class="block py-2 text-neutral-500 hover:text-primary">旅游团</a>
            <a href="{% url 'house' %}" class="block py-2 text-neutral-500 hover:text-primary">酒店/民宿</a>
            <a href="#" class="block py-2 text-primary font-medium border-l-2 border-primary pl-2">出行</a>
            <a href="{% url 'itinerary' %}" class="block py-2 text-neutral-500 hover:text-primary">我的行程</a>
            <div class="flex space-x-4 pt-2 border-t">
                <a href="/user/login/" class="text-neutral-500 hover:text-primary">登录</a>
                <a href="/register/" class="bg-primary text-white px-4 py-2 rounded-full hover:bg-primary/90">注册</a>
            </div>
        </div>
    </div>

    <!-- 主内容区 -->
    <main class="flex-grow">
        <!-- 湘西风景展示区 - 使用更具代表性的湘西图片 -->
        <section class="relative h-[300px] md:h-[450px] overflow-hidden">
            <img src="https://picsum.photos/id/1036/1600/800" alt="湘西凤凰古城风景图" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-r from-wood/70 to-transparent flex items-center">
                <div class="container mx-auto px-4 text-white">
                    <h1 class="text-[clamp(1.8rem,5vw,3rem)] font-miao font-bold text-shadow mb-2">湘西之旅</h1>
                    <p class="text-[clamp(1rem,2vw,1.25rem)] max-w-xl text-white/90">探索神秘湘西，感受土家族、苗族文化魅力，体验不一样的旅行</p>
                </div>
            </div>
        </section>

        <!-- 票务预订区 -->
        <section class="container mx-auto px-4 -mt-16 relative z-10">
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
                <!-- 左侧票务类型导航 -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-xl shadow-card p-4 sticky top-24 wood-border">
                        <h3 class="font-semibold text-lg mb-4 text-wood">票务类型</h3>
                        <ul class="space-y-1">
                            <li>
                                <button class="ticket-type-btn w-full text-left px-4 py-3 rounded-lg bg-primary/10 text-primary font-medium flex items-center justify-between transition-custom" data-type="train">
                                    <span>火车票</span>
                                    <i class="fa fa-train"></i>
                                </button>
                            </li>
                            <li>
                                <button class="ticket-type-btn w-full text-left px-4 py-3 rounded-lg hover:bg-neutral-100 text-neutral-600 font-medium flex items-center justify-between transition-custom" data-type="plane">
                                    <span>飞机票</span>
                                    <i class="fa fa-plane"></i>
                                </button>
                            </li>
                            <li>
                                <button class="ticket-type-btn w-full text-left px-4 py-3 rounded-lg hover:bg-neutral-100 text-neutral-600 font-medium flex items-center justify-between transition-custom" data-type="bus">
                                    <span>汽车票</span>
                                    <i class="fa fa-bus"></i>
                                </button>
                            </li>
                            <li>
                                <button class="ticket-type-btn w-full text-left px-4 py-3 rounded-lg hover:bg-neutral-100 text-neutral-600 font-medium flex items-center justify-between transition-custom" data-type="charter">
                                    <span>预约包车</span>
                                    <i class="fa fa-car"></i>
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- 中间票务查询表单 -->
                <div class="lg:col-span-2">
                    <div class="bg-white rounded-xl shadow-card p-6 wood-border">
                        <div class="border-b border-neutral-200 pb-4 mb-6">
                            <h2 class="ticket-title text-xl font-bold text-wood">国内火车票</h2>
                        </div>

                        <!-- 火车/高铁表单 -->
                        <div class="ticket-form" id="train-form">
                            <form class="space-y-6">
                                <div class="space-y-4">
                                    <div class="relative">
                                        <label class="block text-sm font-medium text-wood mb-1">出发城市</label>
                                        <div class="relative">
                                            <input type="text" placeholder="请输入出发城市" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                            <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-primary transition-custom">
                                                <i class="fa fa-exchange"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="relative">
                                        <label class="block text-sm font-medium text-wood mb-1">到达城市</label>
                                        <div class="relative">
                                            <input type="text" placeholder="请输入到达城市" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                            <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-primary transition-custom">
                                                <i class="fa fa-exchange"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div class="relative">
                                            <label class="block text-sm font-medium text-wood mb-1">出发日期</label>
                                            <input type="date" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                        </div>
                                        <div class="relative">
                                            <label class="block text-sm font-medium text-wood mb-1">乘客类型</label>
                                            <select class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom appearance-none bg-white">
                                                <option value="adult">成人</option>
                                                <option value="student">学生</option>
                                                <option value="child">儿童</option>
                                                <option value="elder">老人</option>
                                            </select>
                                            <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-neutral-400">
                                                <i class="fa fa-chevron-down"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom btn-miao">
                                    搜索火车票
                                </button>
                            </form>
                        </div>

                        <!-- 飞机票表单 -->
                        <div class="ticket-form hidden" id="plane-form">
                            <form class="space-y-6">
                                <div class="space-y-4">
                                    <div class="relative">
                                        <label class="block text-sm font-medium text-wood mb-1">出发城市</label>
                                        <div class="relative">
                                            <input type="text" placeholder="请输入出发城市" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                            <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-primary transition-custom">
                                                <i class="fa fa-exchange"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="relative">
                                        <label class="block text-sm font-medium text-wood mb-1">到达城市</label>
                                        <div class="relative">
                                            <input type="text" placeholder="请输入到达城市" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                            <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-primary transition-custom">
                                                <i class="fa fa-exchange"></i>
                                            </button>
                                        </div>
                                        </div>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div class="relative">
                                            <label class="block text-sm font-medium text-wood mb-1">出发日期</label>
                                            <input type="date" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                        </div>
                                        <div class="relative">
                                            <label class="block text-sm font-medium text-wood mb-1">返程日期</label>
                                            <input type="date" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                        </div>
                                    </div>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div class="relative">
                                            <label class="block text-sm font-medium text-wood mb-1">乘客数</label>
                                            <select class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom appearance-none bg-white">
                                                <option value="1">1人</option>
                                                <option value="2">2人</option>
                                                <option value="3">3人</option>
                                                <option value="4">4人</option>
                                                <option value="5">5人</option>
                                                <option value="6">6人</option>
                                            </select>
                                            <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-neutral-400">
                                                <i class="fa fa-chevron-down"></i>
                                            </div>
                                        </div>
                                        <div class="relative">
                                            <label class="block text-sm font-medium text-wood mb-1">舱位类型</label>
                                            <select class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom appearance-none bg-white">
                                                <option value="economy">经济舱</option>
                                                <option value="business">商务舱</option>
                                                <option value="first">头等舱</option>
                                            </select>
                                            <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-neutral-400">
                                                <i class="fa fa-chevron-down"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom btn-miao">
                                    搜索飞机票
                                </button>
                            </form>
                        </div>

                        <!-- 汽车票表单 -->
                        <div class="ticket-form hidden" id="bus-form">
                            <form class="space-y-6">
                                <div class="space-y-4">
                                    <div class="relative">
                                        <label class="block text-sm font-medium text-wood mb-1">出发城市/站点</label>
                                        <div class="relative">
                                            <input type="text" placeholder="请输入出发城市" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                            <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-primary transition-custom">
                                                <i class="fa fa-exchange"></i>
                                            </button>
                                        </div>
                                        </div>
                                    <div class="relative">
                                        <label class="block text-sm font-medium text-wood mb-1">到达城市/站点</label>
                                        <div class="relative">
                                            <input type="text" placeholder="请输入到达城市" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                            <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-primary transition-custom">
                                                <i class="fa fa-exchange"></i>
                                            </button>
                                        </div>
                                        </div>
                                    <div class="relative">
                                        <label class="block text-sm font-medium text-wood mb-1">出发日期</label>
                                        <input type="date" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                    </div>
                                </div>
                                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom btn-miao">
                                    搜索汽车票
                                </button>
                            </form>
                        </div>

                        <!-- 包车表单 -->
                        <div class="ticket-form hidden" id="charter-form">
                            <form class="space-y-6">
                                <div class="space-y-4">
                                    <div class="relative">
                                        <label class="block text-sm font-medium text-wood mb-1">出发城市</label>
                                        <div class="relative">
                                            <input type="text" placeholder="请输入出发城市" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                            <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-primary transition-custom">
                                                <i class="fa fa-exchange"></i>
                                            </button>
                                        </div>
                                        </div>
                                    <div class="relative">
                                        <label class="block text-sm font-medium text-wood mb-1">到达城市</label>
                                        <div class="relative">
                                            <input type="text" placeholder="请输入到达城市" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                            <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-primary transition-custom">
                                                <i class="fa fa-exchange"></i>
                                            </button>
                                        </div>
                                        </div>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div class="relative">
                                            <label class="block text-sm font-medium text-wood mb-1">出发日期</label>
                                            <input type="date" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                        </div>
                                        <div class="relative">
                                            <label class="block text-sm font-medium text-wood mb-1">返程日期</label>
                                            <input type="date" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                        </div>
                                    </div>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div class="relative">
                                            <label class="block text-sm font-medium text-wood mb-1">乘客数</label>
                                            <select class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom appearance-none bg-white">
                                                <option value="1-3">1-3人</option>
                                                <option value="4-6">4-6人</option>
                                                <option value="7-9">7-9人</option>
                                                <option value="10+">10人以上</option>
                                            </select>
                                            <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-neutral-400">
                                                <i class="fa fa-chevron-down"></i>
                                            </div>
                                        </div>
                                        <div class="relative">
                                            <label class="block text-sm font-medium text-wood mb-1">车型偏好</label>
                                            <select class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom appearance-none bg-white">
                                                <option value="economy">经济型轿车</option>
                                                <option value="business">商务车</option>
                                                <option value="suv">SUV</option>
                                                <option value="van">面包车</option>
                                                <option value="bus">小型客车</option>
                                            </select>
                                            <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-neutral-400">
                                                <i class="fa fa-chevron-down"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="relative">
                                        <label class="block text-sm font-medium text-wood mb-1">备注需求</label>
                                        <textarea rows="3" placeholder="请输入您的特殊需求（如行李较多、需要双语司机等）" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom"></textarea>
                                    </div>
                                </div>
                                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom btn-miao">
                                    预约包车服务
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 右侧出行小贴士 -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-xl shadow-card p-6 wood-border">
                        <h3 class="font-semibold text-lg mb-4 text-wood">湘西出行小贴士</h3>
                        <ul class="space-y-4">
                            <li class="flex gap-3">
                                <div class="flex-shrink-0 w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary">
                                    <i class="fa fa-train"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-neutral-800">火车出行</h4>
                                    <p class="text-sm text-neutral-600">湘西主要火车站有吉首站、怀化站等，建议提前30分钟到站安检</p>
                                </div>
                            </li>
                            <li class="flex gap-3">
                                <div class="flex-shrink-0 w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary">
                                    <i class="fa fa-plane"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-neutral-800">飞机出行</h4>
                                    <p class="text-sm text-neutral-600">最近的机场是张家界荷花机场和怀化芷江机场，有机场大巴接驳</p>
                                </div>
                            </li>
                            <li class="flex gap-3">
                                <div class="flex-shrink-0 w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary">
                                    <i class="fa fa-bus"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-neutral-800">汽车出行</h4>
                                    <p class="text-sm text-neutral-600">湘西山区多，部分路段较崎岖，建议选择正规运营车辆</p>
                                </div>
                            </li>
                            <li class="flex gap-3">
                                <div class="flex-shrink-0 w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary">
                                    <i class="fa fa-car"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-neutral-800">包车服务</h4>
                                    <p class="text-sm text-neutral-600">湘西景点分散，包车是便捷选择，提前预约可享优惠</p>
                                </div>
                            </li>
                        </ul>
                        <div class="mt-6 pt-4 border-t border-neutral-100">
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium flex items-center">
                                查看更多出行指南 <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 热门目的地推荐 -->
        <section class="container mx-auto px-4 py-12">
            <div class="text-center mb-10">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-miao font-bold text-wood mb-3">热门目的地</h2>
                <p class="text-neutral-600 max-w-2xl mx-auto">探索湘西最美的风景，从这些热门目的地开始您的旅程</p>
                <div class="miao-divider mx-auto w-40 mt-4"></div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 目的地卡片1 -->
                <div class="accommodation-card bg-white rounded-xl overflow-hidden shadow-card">
                    <div class="card-image-container h-48">
                        <img src="https://picsum.photos/id/1037/600/400" alt="凤凰古城" class="card-image w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-lg mb-2 text-wood">凤凰古城</h3>
                        <p class="text-sm text-neutral-600 mb-4">中国最美的小城，沱江穿城而过，吊脚楼依山而建</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-500">距吉首市52公里</span>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium">查看路线</a>
                        </div>
                    </div>
                </div>

                <!-- 目的地卡片2 -->
                <div class="accommodation-card bg-white rounded-xl overflow-hidden shadow-card">
                    <div class="card-image-container h-48">
                        <img src="https://picsum.photos/id/1039/600/400" alt="张家界" class="card-image w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-lg mb-2 text-wood">张家界</h3>
                        <p class="text-sm text-neutral-600 mb-4">世界自然遗产，独特的石英砂岩峰林地貌令人惊叹</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-500">距吉首市150公里</span>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium">查看路线</a>
                        </div>
                    </div>
                </div>

                <!-- 目的地卡片3 -->
                <div class="accommodation-card bg-white rounded-xl overflow-hidden shadow-card">
                    <div class="card-image-container h-48">
                        <img src="https://picsum.photos/id/1040/600/400" alt="德夯苗寨" class="card-image w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-lg mb-2 text-wood">德夯苗寨</h3>
                        <p class="text-sm text-neutral-600 mb-4">美丽的峡谷苗寨，保存了完整的苗族传统文化</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-500">距吉首市24公里</span>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium">查看路线</a>
                        </div>
                    </div>
                </div>

                <!-- 目的地卡片4 -->
                <div class="accommodation-card bg-white rounded-xl overflow-hidden shadow-card">
                    <div class="card-image-container h-48">
                        <img src="https://picsum.photos/id/1041/600/400" alt="芙蓉镇" class="card-image w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-lg mb-2 text-wood">芙蓉镇</h3>
                        <p class="text-sm text-neutral-600 mb-4">挂在瀑布上的千年古镇，夜景尤为迷人</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-500">距吉首市80公里</span>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium">查看路线</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center mt-10">
                <a href="#" class="inline-block bg-white border border-primary text-primary hover:bg-primary hover:text-white font-medium py-2 px-6 rounded-lg transition-custom">
                    查看更多目的地 <i class="fa fa-long-arrow-right ml-1"></i>
                </a>
            </div>
        </section>

        <!-- 出行方式对比 -->
        <section class="bg-white py-12 wood-texture">
            <div class="container mx-auto px-4">
                <div class="text-center mb-10">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-miao font-bold text-wood mb-3">出行方式对比</h2>
                    <p class="text-neutral-600 max-w-2xl mx-auto">选择最适合您的出行方式，让旅途更加舒适愉快</p>
                    <div class="miao-divider mx-auto w-40 mt-4"></div>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full min-w-[768px] border-collapse">
                        <thead>
                            <tr class="bg-primary/5">
                                <th class="py-4 px-6 text-left text-wood font-semibold border-b border-neutral-200">对比项</th>
                                <th class="py-4 px-6 text-left text-wood font-semibold border-b border-neutral-200">火车</th>
                                <th class="py-4 px-6 text-left text-wood font-semibold border-b border-neutral-200">飞机</th>
                                <th class="py-4 px-6 text-left text-wood font-semibold border-b border-neutral-200">汽车</th>
                                <th class="py-4 px-6 text-left text-wood font-semibold border-b border-neutral-200">包车</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-6 border-b border-neutral-200 font-medium">费用</td>
                                <td class="py-4 px-6 border-b border-neutral-200">中等</td>
                                <td class="py-4 px-6 border-b border-neutral-200">较高</td>
                                <td class="py-4 px-6 border-b border-neutral-200">较低</td>
                                <td class="py-4 px-6 border-b border-neutral-200">较高</td>
                            </tr>
                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-6 border-b border-neutral-200 font-medium">舒适度</td>
                                <td class="py-4 px-6 border-b border-neutral-200">良好</td>
                                <td class="py-4 px-6 border-b border-neutral-200">良好</td>
                                <td class="py-4 px-6 border-b border-neutral-200">一般</td>
                                <td class="py-4 px-6 border-b border-neutral-200">优秀</td>
                            </tr>
                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-6 border-b border-neutral-200 font-medium">灵活性</td>
                                <td class="py-4 px-6 border-b border-neutral-200">一般</td>
                                <td class="py-4 px-6 border-b border-neutral-200">较差</td>
                                <td class="py-4 px-6 border-b border-neutral-200">良好</td>
                                <td class="py-4 px-6 border-b border-neutral-200">优秀</td>
                            </tr>
                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-6 border-b border-neutral-200 font-medium">耗时</td>
                                <td class="py-4 px-6 border-b border-neutral-200">中等</td>
                                <td class="py-4 px-6 border-b border-neutral-200">较短</td>
                                <td class="py-4 px-6 border-b border-neutral-200">较长</td>
                                <td class="py-4 px-6 border-b border-neutral-200">灵活控制</td>
                            </tr>
                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-6 border-b border-neutral-200 font-medium">适合人群</td>
                                <td class="py-4 px-6 border-b border-neutral-200">大众人群</td>
                                <td class="py-4 px-6 border-b border-neutral-200">时间紧张者</td>
                                <td class="py-4 px-6 border-b border-neutral-200">预算有限者</td>
                                <td class="py-4 px-6 border-b border-neutral-200">家庭/团体出行</td>
                            </tr>
                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-6 font-medium">适合路线</td>
                                <td class="py-4 px-6">长距离跨城</td>
                                <td class="py-4 px-6">远距离跨省</td>
                                <td class="py-4 px-6">短途周边</td>
                                <td class="py-4 px-6">景区间接驳</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- 旅行攻略推荐 -->
        <section class="container mx-auto px-4 py-12">
            <div class="text-center mb-10">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-miao font-bold text-wood mb-3">湘西出行攻略</h2>
                <p class="text-neutral-600 max-w-2xl mx-auto">精选湘西旅行攻略，助您规划完美行程</p>
                <div class="miao-divider mx-auto w-40 mt-4"></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 攻略卡片1 -->
                <div class="accommodation-card bg-white rounded-xl overflow-hidden shadow-card">
                    <div class="card-image-container h-48">
                        <img src="https://picsum.photos/id/1051/600/400" alt="凤凰古城三日游" class="card-image w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <div class="flex items-center text-xs text-neutral-500 mb-2">
                            <span class="bg-primary/10 text-primary px-2 py-1 rounded-full mr-2">交通指南</span>
                            <span><i class="fa fa-eye mr-1"></i> 2.4k</span>
                            <span class="ml-2"><i class="fa fa-comment mr-1"></i> 128</span>
                        </div>
                        <h3 class="font-bold text-lg mb-2 text-wood">凤凰古城三日游交通指南</h3>
                        <p class="text-sm text-neutral-600 mb-4 line-clamp-3">详细介绍如何从全国各地前往凤凰古城，以及古城内的交通方式，让您的旅程更加顺畅...</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                                <span class="ml-2 text-sm text-neutral-600">湘西旅行达人</span>
                            </div>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium">阅读全文</a>
                        </div>
                    </div>
                </div>

                <!-- 攻略卡片2 -->
                <div class="accommodation-card bg-white rounded-xl overflow-hidden shadow-card">
                    <div class="card-image-container h-48">
                        <img src="https://picsum.photos/id/1052/600/400" alt="张家界交通攻略" class="card-image w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <div class="flex items-center text-xs text-neutral-500 mb-2">
                            <span class="bg-primary/10 text-primary px-2 py-1 rounded-full mr-2">实用攻略</span>
                            <span><i class="fa fa-eye mr-1"></i> 3.1k</span>
                            <span class="ml-2"><i class="fa fa-comment mr-1"></i> 215</span>
                        </div>
                        <h3 class="font-bold text-lg mb-2 text-wood">张家界景区内部交通全攻略</h3>
                        <p class="text-sm text-neutral-600 mb-4 line-clamp-3">张家界景区面积广阔，内部交通复杂，本攻略详细介绍各景点间的接驳方式和省时技巧...</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/65/100/100" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                                <span class="ml-2 text-sm text-neutral-600">张导带你玩</span>
                            </div>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium">阅读全文</a>
                        </div>
                    </div>
                </div>

                <!-- 攻略卡片3 -->
                <div class="accommodation-card bg-white rounded-xl overflow-hidden shadow-card">
                    <div class="card-image-container h-48">
                        <img src="https://picsum.photos/id/1053/600/400" alt="湘西自驾游" class="card-image w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <div class="flex items-center text-xs text-neutral-500 mb-2">
                            <span class="bg-primary/10 text-primary px-2 py-1 rounded-full mr-2">自驾指南</span>
                            <span><i class="fa fa-eye mr-1"></i> 1.8k</span>
                            <span class="ml-2"><i class="fa fa-comment mr-1"></i> 97</span>
                        </div>
                        <h3 class="font-bold text-lg mb-2 text-wood">湘西环线自驾游最佳路线</h3>
                        <p class="text-sm text-neutral-600 mb-4 line-clamp-3">5天4晚湘西环线自驾，涵盖凤凰、芙蓉镇、张家界等景点，附详细路线图和注意事项...</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/66/100/100" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                                <span class="ml-2 text-sm text-neutral-600">自驾老司机</span>
                            </div>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium">阅读全文</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center mt-10">
                <a href="#" class="inline-block bg-white border border-primary text-primary hover:bg-primary hover:text-white font-medium py-2 px-6 rounded-lg transition-custom">
                    查看更多攻略 <i class="fa fa-long-arrow-right ml-1"></i>
                </a>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-primary text-white pt-12 pb-6">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
                <div>
                    <h4 class="text-lg font-bold mb-4">关于湘行</h4>
                    <p class="text-white/80 text-sm mb-4">湘行旅游网致力于为您提供湘西地区最全面的旅游服务，包括景点门票、酒店预订、交通票务等一站式旅行解决方案。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-white/80 hover:text-white transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-white/80 hover:text-white transition-colors">
                            <i class="fa fa-wechat text-xl"></i>
                        </a>
                        <a href="#" class="text-white/80 hover:text-white transition-colors">
                            <i class="fa fa-instagram text-xl"></i>
                        </a>
                        <a href="#" class="text-white/80 hover:text-white transition-colors">
                            <i class="fa fa-youtube-play text-xl"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h4 class="text-lg font-bold mb-4">快速链接</h4>
                    <ul class="space-y-2 text-sm text-white/80">
                        <li><a href="#" class="hover:text-white transition-colors">首页</a></li>
                        
                        <li><a href="{% url 'house' %}" class="hover:text-white transition-colors">酒店民宿</a></li>
                        <li><a href="{% url 'travel' %}" class="hover:text-white transition-colors">交通出行</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">旅游攻略</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">旅游团</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-bold mb-4">帮助中心</h4>
                    <ul class="space-y-2 text-sm text-white/80">
                        <li><a href="#" class="hover:text-white transition-colors">预订指南</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">退款政策</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">联系客服</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-bold mb-4">联系我们</h4>
                    <ul class="space-y-2 text-sm text-white/80">
                        <li class="flex items-center">
                            <i class="fa fa-map-marker mr-3 text-neutral-300"></i>
                            <span class="text-neutral-300">湖南省湘西土家族苗族自治州吉首市</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3 text-neutral-300"></i>
                            <span class="text-neutral-300">400-123-4567</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3 text-neutral-300"></i>
                            <span class="text-neutral-300">service@xiangxing.com</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-neutral-600 pt-6 text-center text-neutral-400 text-sm">
                <p>© 2025 湘行旅游网 版权所有 | 湘ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('shadow');
                header.classList.remove('shadow-sm');
            } else {
                header.classList.remove('shadow');
                header.classList.add('shadow-sm');
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId !== '#') {
                    document.querySelector(targetId).scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });

        // 票务类型切换功能
        const ticketButtons = document.querySelectorAll('.ticket-type-btn');
        const ticketForms = document.querySelectorAll('.ticket-form');
        const ticketTitle = document.querySelector('.ticket-title');

        ticketButtons.forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有按钮的活跃状态
                ticketButtons.forEach(btn => {
                    btn.classList.remove('bg-primary/10', 'text-primary');
                    btn.classList.add('hover:bg-neutral-100', 'text-neutral-600');
                });

                // 设置当前按钮为活跃状态
                this.classList.add('bg-primary/10', 'text-primary');
                this.classList.remove('hover:bg-neutral-100', 'text-neutral-600');

                // 获取票务类型
                const type = this.getAttribute('data-type');

                // 隐藏所有表单
                ticketForms.forEach(form => {
                    form.classList.add('hidden');
                });

                // 根据类型显示对应表单并更新标题
                if (type === 'train') {
                    document.getElementById('train-form').classList.remove('hidden');
                    ticketTitle.textContent = '国内火车票';
                } else if (type === 'plane') {
                    document.getElementById('plane-form').classList.remove('hidden');
                    ticketTitle.textContent = '国内飞机票';
                } else if (type === 'bus') {
                    document.getElementById('bus-form').classList.remove('hidden');
                    ticketTitle.textContent = '汽车票';
                } else if (type === 'charter') {
                    document.getElementById('charter-form').classList.remove('hidden');
                    ticketTitle.textContent = '预约包车';
                }
            });
        });

        // 城市输入框功能增强
        const cityInputs = document.querySelectorAll('input[placeholder="请输入出发城市"], input[placeholder="请输入到达城市"], input[placeholder="请输入出发城市或站点"], input[placeholder="请输入到达城市或站点"], input[placeholder="请输入目的地"]');

        // 示例城市数据 - 增加湘西相关城市
        const popularCities = [
            '长沙', '张家界', '吉首', '凤凰古城', '怀化', '湘西州',
            '北京', '上海', '广州', '深圳', '成都', '武汉'
        ];

        cityInputs.forEach(input => {
            // 输入框获得焦点时显示热门城市建议
            input.addEventListener('focus', function() {
                // 检查是否已创建建议框
                if (!this.nextElementSibling || !this.nextElementSibling.classList.contains('city-suggestions')) {
                    const suggestionsBox = document.createElement('div');
                    suggestionsBox.className = 'city-suggestions';

                    // 添加热门城市
                    popularCities.forEach(city => {
                        const cityItem = document.createElement('div');
                        cityItem.className = 'px-4 py-2 hover:bg-neutral-100 cursor-pointer transition-colors';
                        cityItem.textContent = city;

                        // 点击城市填充到输入框
                        cityItem.addEventListener('click', () => {
                            input.value = city;
                            suggestionsBox.remove();
                        });

                        suggestionsBox.appendChild(cityItem);
                    });

                    // 将建议框插入到输入框后面
                    this.parentNode.appendChild(suggestionsBox);
                }
            });

            // 输入内容时过滤城市
            input.addEventListener('input', function() {
                const value = this.value.toLowerCase();
                const suggestionsBox = this.nextElementSibling;

                if (suggestionsBox && suggestionsBox.classList.contains('city-suggestions')) {
                    suggestionsBox.innerHTML = '';

                    // 过滤匹配的城市
                    const filteredCities = popularCities.filter(city =>
                        city.toLowerCase().includes(value)
                    );

                    if (filteredCities.length > 0) {
                        filteredCities.forEach(city => {
                            const cityItem = document.createElement('div');
                            cityItem.className = 'px-4 py-2 hover:bg-neutral-100 cursor-pointer transition-colors';
                            cityItem.textContent = city;

                            cityItem.addEventListener('click', () => {
                                input.value = city;
                                suggestionsBox.remove();
                            });

                            suggestionsBox.appendChild(cityItem);
                        });
                    } else {
                        // 没有匹配结果时显示提示
                        const noResult = document.createElement('div');
                        noResult.className = 'px-4 py-2 text-wood';
                        noResult.textContent = '没有找到匹配的城市，请手动输入';
                        suggestionsBox.appendChild(noResult);
                    }
                }
            });

            // 失去焦点时移除建议框
            input.addEventListener('blur', function() {
                setTimeout(() => {
                    const suggestionsBox = this.nextElementSibling;
                    if (suggestionsBox && suggestionsBox.classList.contains('city-suggestions')) {
                        suggestionsBox.remove();
                    }
                }, 200);
            });
        });

        // 用户下拉菜单交互
        document.addEventListener('DOMContentLoaded', function() {
            const userTrigger = document.querySelector('.user-menu-trigger');
            const userMenu = document.querySelector('.user-dropdown-menu');

            if (userTrigger && userMenu) {
                userTrigger.addEventListener('click', function(e) {
                    e.stopPropagation();
                    userMenu.classList.toggle('active');
                });

                // 点击其他区域关闭菜单
                document.addEventListener('click', function() {
                    if (userMenu.classList.contains('active')) {
                        userMenu.classList.remove('active');
                    }
                });

                // 点击菜单内部不关闭
                userMenu.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            }
        });
    </script>
</body>
</html>
